We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Colors

When a color is marked "WCAG safe", that means it has enough contrast to be used as colored text against a white background, or that white text can be displayed against a background of that color. Other color combinations should be checked for contrast before being used in text.

Site Brand Colors

Primary

$p_blue

#336aff
WCAG-safe

$p_green

#138761
WCAG-safe

$p_purple

#7a46ff
WCAG-safe

$p_coolgray10

#666666
WCAG-safe

Secondary

$s_bgblue

#06005a
WCAG-safe

$s_blue

#00b5e2
Not Safe

$s_red

#af272f
WCAG-safe

$s_warmgray10

#796e65
WCAG-safe

$s_green

#78be20
Not Safe

$s_purple

#5949a7
WCAG-safe

$s_coolgray6

#a7a8aa
Not Safe

$s_darkblue

#003da5
WCAG-safe

$s_warmgray6

#a59c94
Not Safe

$s_coolgray11

#53565a
WCAG-safe

Tertiary

$t_orange

#ffa300
Not Safe

$t_darkorange

#ae650c
WCAG-safe

$t_pink

#ef4a81
Not Safe

Text

$text

#231f20
WCAG-safe

$link

#0773be
WCAG-safe

$s_lightgray

#f5f5f5
Default background color for html body

Pastel

These colors are WCAG-safe with black text, and can be used against a white or gray background.

$pastel_blue

#e0eff9

$pastel_green

#e7f3ef

$pastel_purple

#e7ebf7

$pastel_gray

#e8e8e8

$pastel_orange

#fff3de

"Let's Measure Up" Campaign Specific Colors

Primary

#008ed6
Not Safe

#009966
Not Safe

#5877cc
Not Safe

#777777
Not Safe

Secondary

#0085e2
Not Safe

#788e20
Not Safe

These text/background color combinations meet our accessibility standards.

Text on a Default Background

#ffffff

$s_lightgray

Text on Background Colors

$p_blue

$p_green

$p_purple

$p_coolgray10

$s_red

$s_warmgray10

$s_purple

$s_darkblue

$s_coolgray11

$pastel_blue

$pastel_green

$pastel_purple

$pastel_gray

$pastel_orange

Formatting

Eyebrows should use darker colors for weight:

  • $p_blue
  • $s_warmgray10
  • $s_purple
  • $p_green
  • $p_purple
  • $s_red

Alerts should use vibrant colors for visibility:

  • $s_green
  • $t_orange
  • $s_blue
  • $s_red

Icons should use WCAG safe colors.

* $link must be bold to have enough contrast against a colored background.